<script setup>
import {ref} from 'vue'
import {useBrowserLocation} from "vue3-baidu-map-gl";

const type = ref('BMAP_NORMAL_MAP')
const mapSetting = ref({
  enableDragging: true,   // 拖拽
  enableInertialDragging: true,   // 惯性拖拽
  enableScrollWheelZoom: true,   // 鼠标缩放
  enableContinuousZoom: true,     // 双击平滑缩放效果
  enableResizeOnCenter: true,     // 启用中心调整大小
  enableDoubleClickZoom: true,   // 双击缩放，左键双击放大、右键双击缩小
  enableKeyboard: true,   // 键盘操作
  enablePinchToZoom: true,    // 双指缩放地图
  enableAutoResize: true,     // 启用自动调整大小
  enableTraffic: false      // 显示交通路况
})

const map = ref()
const {get, location, isLoading, isError, status} = useBrowserLocation(null, () => {
  map.value.resetCenter()
})
</script>

<template>
  <el-container>
    <el-main>
      <!--      <label>-->
      <!--        <input type="checkbox" v-model="mapSetting.enableScrollWheelZoom"/>-->
      <!--        鼠标缩放-->
      <!--      </label>-->
      <!--      <br/>-->
      <!--      <label>-->
      <!--        <input type="checkbox" v-model="mapSetting.enableDragging"/>-->
      <!--        拖拽-->
      <!--      </label>-->
      <!--      <br/>-->
      <!--      <label>-->
      <!--        <input type="checkbox" v-model="mapSetting.enableInertialDragging"/>-->
      <!--        惯性拖拽-->
      <!--      </label>-->
      <!--      <br/>-->
      <!--      <label>-->
      <!--        <input type="checkbox" v-model="mapSetting.enablePinchToZoom"/>-->
      <!--        双指缩放地图-->
      <!--      </label>-->
      <!--      <br/>-->
      <!--      <label>-->
      <!--        <input type="checkbox" v-model="mapSetting.enableKeyboard"/>-->
      <!--        键盘操作-->
      <!--      </label>-->
      <!--      <br/>-->
      <!--      <label>-->
      <!--        <input type="checkbox" v-model="mapSetting.enableDoubleClickZoom"/>-->
      <!--        双击缩放，左键双击放大、右键双击缩小-->
      <!--      </label>-->
      <!--      <br/>-->
      <!--      <label>-->
      <!--        <input type="checkbox" v-model="mapSetting.enableContinuousZoom"/>-->
      <!--        双击平滑缩放效果-->
      <!--      </label>-->
      <!--      <br/>-->
      <!--      <label>-->
      <!--        <input type="checkbox" v-model="mapSetting.enableTraffic"/>-->
      <!--        显示交通路况-->
      <!--      </label>-->
      <!--      <br/>-->
      <!--      <br/>-->
      地图类型：
      <select name="" id="" v-model="type">
        <option value="BMAP_NORMAL_MAP">常规地图 BMAP_NORMAL_MAP</option>
        <option value="BMAP_EARTH_MAP">地球模式 BMAP_EARTH_MAP</option>
        <option value="BMAP_SATELLITE_MAP">卫星图 BMAP_EARTH_MAP</option>
      </select>
      <div class="state" v-if="!isLoading && !isError">
        <h5>定位:</h5>
        <span>
        城市 - {{ location.address?.province }}-{{ location.address?.city }}-{{ location.address?.district }}-{{
            location.address?.street
          }}
      </span>
        <span>纬度 - {{ location.point?.lat }}</span>
        <span>经度 - {{ location.point?.lng }}</span>
        <br/>
        <span>定位精度 - {{ location.accuracy }}m</span>
      </div>
      <div class="state" v-else-if="isError">出错了，{{ status }}</div>
      <div class="state" v-else>定位中...</div>
      <button v-if="!isLoading" @click="get">重新获取</button>
      <br/>
      <el-card shadow="hover">
        <BMap
            ref="map"
            @initd="get"
            :center="location.point || undefined"
            :heading="64.5"
            :tilt="73"
            :zoom="19"
            :minZoom="3"
            :mapType="type"
            :enableDragging="mapSetting.enableDragging"
            :enableInertialDragging="mapSetting.enableInertialDragging"
            :enableScrollWheelZoom="mapSetting.enableScrollWheelZoom"
            :enableContinuousZoom="mapSetting.enableContinuousZoom"
            :enableDoubleClickZoom="mapSetting.enableDoubleClickZoom"
            :enableKeyboard="mapSetting.enableKeyboard"
            :enablePinchToZoom="mapSetting.enablePinchToZoom"
            :enableTraffic="mapSetting.enableTraffic"
        >
          <template v-if="!isLoading">
            <BLocation/>
            <BNavigation3d/>
            <BCircle
                strokeStyle="solid"
                strokeColor="#0099ff"
                :strokeOpacity="0.8"
                fillColor="#0099ff"
                :fillOpacity="0.5"
                :center="location.point"
                :radius="location.accuracy"
            />
          </template>
        </BMap>
      </el-card>
    </el-main>
  </el-container>
</template>

<style scoped>

</style>